
<template>
  <div class="project">
    <van-nav-bar title="项目列表" fixed :left-arrow="false" />
    <div class="list">
      <div
        class="cell"
        v-if="item.schedule.slice(0, 5) != 100"
        @click="details(item.id)"
        v-for="item in data.list"
      >
        <div class="cell_l">
          <img :src="item.thumb" />
        </div>
        <div class="cell_r">
          <p class="title">{{ item.name }}</p>
          <p class="center">
            {{ item.item_desc }}
            <span>{{ item.money }}元{{ item.type_name }}</span>
          </p>
          <div class="jindu">
            <div class="progressbox">
              <div
                class="progress"
                :style="{ width: item.schedule.slice(0, 5) + '%' }"
              ></div>
            </div>
            <span>已售{{ item.schedule.slice(0, 5) }}%</span>
          </div>
          <div class="tagbox">
            <span>{{ item.min_money }}元起投</span>
            <span>项目周期{{ item.days }}天</span>
            <span>每日分红{{ item.apr_money }}元</span>
          </div>
        </div>
      </div>
      <div
        class="cell"
        v-if="item.schedule.slice(0, 5) == 100"
        @click="details(item.id)"
        v-for="item in data.list"
      >
        <div class="complete">
          <img src="../../assets/img/project/complete.png" />
        </div>
        <div class="cell_l">
          <img :src="item.thumb" />
        </div>
        <div class="cell_r">
          <p class="title">{{ item.name }}</p>
          <p class="center">
            {{ item.item_desc }}
            <span>{{ item.money }}元{{ item.type_name }}</span>
          </p>
          <div class="jindu">
            <div class="progressbox">
              <div
                class="progress"
                :style="{ width: item.schedule.slice(0, 5) + '%' }"
              ></div>
            </div>
            <span>已售{{ item.schedule.slice(0, 5) }}%</span>
          </div>
          <div class="tagbox">
            <span>{{ item.min_money }}元起投</span>
            <span>项目周期{{ item.days }}天</span>
            <span>每日分红{{ item.apr_money }}元</span>
          </div>
        </div>
      </div>
      <div style="height: 50px"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Fetch from "../../utils/fetch";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "project",
  },
  data() {
    //这里存放数据
    return {
      data: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init() {
      Fetch("/item/dq/search").then((res) => {
        this.data = res.data;
      });
    },
    details(id) {
      this.$router.push({
        //核心语句
        path: "/Investmentdetails", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          id: id,
        },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.project {
  width: 100%;
  height: calc(100% - 50px);
  margin-top: 40px;
  background: #f7f8f9;
  .list {
    background: #f7f8f9;
    padding: 10px 15px;
  }
  .grey {
    color: #bfbfbf !important;
  }
  .greywhite {
    background: #bfbfbf !important;
    color: #ffffff !important;
  }
  .cell {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-top: 10px;
    position: relative;
    .complete {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.71);
      z-index: 1;
      img {
        width: 73px;
        height: 73px;
      }
    }
    .cell_l {
      width: 25%;
      height: 100%;
      float: left;
      position: absolute;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cell_r {
      width: calc(75% - 28px);
      margin-left: 16px;
      float: right;
      padding: 6px 12px;
      .title {
        font-size: 15px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #2f2f2f;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 5px;
      }
      .center {
        font-size: 11px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #82818f;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          color: red;
        }
      }
      .jindu {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin: 7px 0 15px 0;
        .progressbox {
          width: 65%;
          height: 5px;
          background: #fef2f2;
          border-radius: 3px;
          position: relative;
          text-align: center;
          overflow: hidden;
          .progress {
            width: 40%;
            position: absolute;
            left: 0;
            top: 0;
            height: 5px;
            background: #ff674c;
            border-radius: 3px;
          }
        }
        span {
          font-size: 10px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #999999;
          margin-left: 4px;
        }
      }
      .tagbox {
        span {
          display: inline-block;
          background: #fdece3;
          border-radius: 2px;
          overflow: hidden;
          padding: 5px;
          margin-right: 5px;
          font-size: 11px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #ff6f35;
        }
      }
    }
  }

  /deep/ .van-nav-bar {
    box-shadow: 0px 1px 2px 0px #e1e1e1;
    z-index: 8;
  }
}
/* //@import url(); 引入公共css类 */
</style>